/*jQuery事件绑定必须放置在函数中(1.jQuery页面初始加载事件) 2.js函数中*/
/*$等同于jQuery*/
$(function() {
	init();
	//添加数据单击事件
	$(".submit button:first").click(function() {
		var $inputs = $("[name='input']");
		$inputs.each(function(i) {
			if ($($inputs[i]).val() == "") {
				alert("请填写完整的用户信息!");
			}
		});
	});
	
	// $(".checkUser").click(function(){
	// 	alert("11");
	// });
	
	
	
	// $(".last tr").even().css("background-color","plum");
	//常识：a href="javascript:void(0)";禁止刷新当前页面
	//使用jQuery动态删除当前数据
	$(".del").click(function(){
		// console.log($(this).parent().parent().html());
		if(confirm("确认删除当前数据吗?")){
			//this 当前dom元素
			$(this).parent().parent().remove();
		}
	});
	//jQuery鼠标移进(mouseover、mouseenter)、移出事件(mouseout、mouseleave)
	//mouseover和mouseout一套使用；mouseenter和mouseleave一套使用
	//mouseover和mouseenter区别：mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
	//							mouseenter 事件只在鼠标移动到选取的元素上时触发。
	//需求：鼠标移动到当前显示行，加深背景颜色
	//鼠标移进
	
	//click mouseover mouseout 属于单个事件; hover 鼠标移进、移出事件，属于复合事件；
	$(".last tr").hover(function(){
		$(this).css("border","1px solid green");
	},function(){
		$(this).css("border","1px solid transparent");
	});
	//搜索查询
	$("#search button").click(function(){
		//获取搜索文本框值
		var $search = $("[name='search']").val();
		if($search == ''){
			//默认查询所有
			init();
		}
		// alert($search);
		//使用jQuery获取dom元素中所有中将标签
		var $markNo = $(".markNo");
		// console.log($markNo);
		//循环遍历
		$markNo.each(function(i){
			var mNo = $($markNo.get(i)).text();
			if($search == mNo){
				var $tr = $(".last tr").eq(i);
				//直接绑定
				$(".last").html($tr);
			}
		});
	});
	function init(){
		
		//初始加载列表数据
		//js操作dom元素 --> jquery也可操作dom元素
		//将前端页面静态数据更改成动态数据
		//使用json数据存储一个对象
		//未持照 1 已持照 0
		var arrStatus = new Array("已持照", "未持照");
		var jsonTr = {
			"userName": "胡应修",
			"markNo": "bj53473409",
			"status": "1",
			"phone": "13574556682",
			"openDate": "2021-07-07"
		};
		//使用json存储多个对象
		var jsonTrArrs = [{
				"userName": "尚晶品",
				"markNo": "bj53473409",
				"status": "1",
				"phone": "18732365599",
				"openDate": "2021-07-05"
			},
			{
				"userName": "张小鱼",
				"markNo": "hb99971228",
				"status": "0",
				"phone": "18774556690",
				"openDate": "2021-07-04"
			},
			{
				"userName": "冯恢弘",
				"markNo": "fj633009sdf",
				"status": "1",
				"phone": "13250504432",
				"openDate": "2021-07-03"
			},
			{
				"userName": "温暖",
				"markNo": "sh93452821",
				"status": "1",
				"phone": "13756690450",
				"openDate": "2021-07-02"
			},
			{
				"userName": "景然",
				"markNo": "tj0932js84df",
				"status": "0",
				"phone": "13250504432",
				"openDate": "2021-07-01"
			},
			{
				"userName": "张小野",
				"markNo": "jn32978333",
				"status": "1",
				"phone": "13030337456",
				"openDate": "2021-07-01"
			},
			{
				"userName": "李利",
				"markNo": "bj908923423",
				"status": "1",
				"phone": "13412344900",
				"openDate": "2021-06-24"
			}
		];
		var $tr = `<tr>
								<td>${jsonTr.userName}</td>
								<td>${jsonTr.markNo}</td>
								<td>${arrStatus[jsonTr.status]}</td>
								<td>${jsonTr.phone}</td>
								<td>${jsonTr.openDate}</td>
					</tr>`;
		//循环遍历json对象数组
		var $trStr = "";
		$(jsonTrArrs).each(function(index){
			var arrJson = jsonTrArrs[index];
			$trStr += `<tr>
								<td>${arrJson.userName}</td>
								<td class="markNo">${arrJson.markNo}</td>
								<td>${arrStatus[arrJson.status]}</td>
								<td>${arrJson.phone}</td>
								<td>${arrJson.openDate}</td>
								<td>
									<a href="#">详情</a>&nbsp;&nbsp;
									<a href="javascript:void(0);" class="del">删除</a>
								</td>
					</tr>`;
		});
		//jQuery绑定dom元素
		// $(".last").append($tr);
		$(".last").html($trStr);
		//使用jQuery进行隔行换色
		$(".last tr").odd().css("background-color","lightblue");
		$(".last tr").mouseover(function(){
			//常识：1.css()样式添加的是行内样式 2.addClass() 添加class样式
			
			//$(this).css("background-color","darkgray");
			$(this).addClass("bg");
		});
		//鼠标移出
		$(".last tr").mouseout(function(){
			//$(this).css("background-color","transparent");
			$(this).removeClass("bg");
		});
	}
});


// function btnSubJQuery(){
// 	$("#errLoginInfo").css("color","red").css("font-weight","bold");
// 	var $username = $("[name='username']").val();
// 	console.log("$username:" + $username);
// 	if($username == ''){
// 		$("#errLoginInfo").html("用户姓名不能为空!");
// 		return;
// 	}
// 	var $phonenum = $("[name='phonenum']").val();
// 	if($phonenum == ''){
// 		$("#errLoginInfo").html("手机号不能为空!");
// 		return;
// 	}
// 	var reg = /^1[7|3|8][0-9]{9}$/;
// 	if (!reg.test($phonenum)) {
// 		$("#errLoginInfo").html("手机号格式不正确!");
// 		return;
// 	}
// 	window.location.href = "http://127.0.0.1:8848/jquery-project-2023/0104-yc/fueloil.html";
// }
// function back(){
// 	window.location.href = "http://127.0.0.1:8848/jquery-project-2023/0104-yc/fueloil.html";
// }
